<template>
  <div class="h-full overflow-hidden">
    <div
      class="w-full bg-[#fdc14b] text-[40px] flex justify-between items-center"
    >
      <p class="font-serif text-white p-2">management system</p>
      <img
        src="https://i.postimg.cc/T2cn3H1V/11-3x.png"
        alt=""
        class="sm:w-[60px] xl:w-[80px]"
      />
    </div>
    <div class="w-full h-full flex">
      <div class="h-full bg-[#ddddddc5] w-[120px]" ref="box">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#ffffff00"
              class="el-menu-vertical-demo"
              default-active="1"
              text-color="black"
            >
              <el-menu-item index="1">
                <el-icon
                  ><img src="https://i.postimg.cc/pTQQMHRZ/image.png" alt=""
                /></el-icon>
                <span @click="toUsermanage">用户管理</span>
              </el-menu-item>
              <el-menu-item index="2">
                <el-icon
                  ><img src="https://i.postimg.cc/6qSp8vts/image.png" alt=""
                /></el-icon>
                <span @click="toshopmanage">商品管理</span>
              </el-menu-item>
              <el-menu-item index="3">
                <el-icon
                  ><img
                    src="https://pic1.imgdb.cn/item/64731c27f024cca1738fcf59.png"
                    alt=""
                /></el-icon>
                <span @click="tobusiness">商家管理</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="w-full">
        <component :is="show"></component>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Usermanage from "./usermanage.vue";
import shopmanage from "./shopmanage.vue";
import business from "./business.vue";

let box = ref(0);
let show = ref(Usermanage);
function toshopmanage() {
  show.value = shopmanage;
}
function toUsermanage() {
  show.value = Usermanage;
}
function tobusiness() {
  show.value = business;
}
</script>
